<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>05.双飞翼布局-logo优化</title>
        <style>
            body {
                min-width: 700px;
            }
            * {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
            }
            .clearfix:after {
                display: block;
                clear: both;
                visibility: hidden;
                overflow: hidden;
                font-size: 0;
                height: 0;
                line-height: 0;
                content: '';
            }
            .clearfix {
                *zoom: 1;
            }
            .fl {
                float: left;
            }
            .fr {
                float: right;
            }
            .container,
            .container .columnArea {
                height: 300px;
            }
            .container .main {
                width: 100%;
                background-color: orange;
                word-break: break-all;
            }
            .main .inner {
                margin: 0 200px 0 300px;
            }
            .container .left {
                width: 300px;
                background-color: green;
                margin: 0 0 0 -100%;
            }
            .left .logo {
                width: 244px;
                height: 81px;
                margin: 0 auto;
            }
            .logo a {
                display: block;
                width: 244px;
                height: 81px;
                background: url(images/logo.png) no-repeat;
                text-indent: -9999em;
            }
            .container .right {
                width: 200px;
                background-color: blue;
                margin: 0 0 0 -200px;
            }
        </style>
    </head>
    <body>
        <div class="container clearfix">
            <div class="main columnArea fl">
                <div class="inner">
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                    欢迎进入凯游网，大家多多支持哈！
                </div>
            </div>
            <div class="left columnArea fl">
                <div class="logo">
                    <!--
                        提高访问权重的作用，h1标签能更友好的
                        支持SEO搜索引擎优化
                    -->
                    <h1>
                        <a href="http://kaiyouservices.com/kaiyou/" title="凯游网">凯游网</a>
                    </h1>
                </div>
            </div>
            <div class="right columnArea fl"></div>
        </div>
    </body>
</html>
